import React, { Component } from 'react'
import axios from 'axios'
export default class Search extends Component {
    userName = React.createRef()
    handleSearch = () => {
        const {value:keyWord} = this.userName.current
        this.props.updateAppState({isFirst:false,isLoading:true})
        axios.get(`api1/search/users?q=${keyWord}`).then(
            response => this.props.updateAppState({isLoading:false,data:response.data.items}),
            error => this.props.updateAppState({isLoading:false,err:error.message})
        )
    }
    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input ref={this.userName} type="text" placeholder="enter the name you search"/>&nbsp;
                    <button onClick={this.handleSearch}>Search</button>
                </div>
            </section>
        )
    }
}
